<template>
  <div class="orderlist">
    <div id="part_one">
      <div class="text_area">
        <span>姓名：</span>
        <el-input v-model="inputname" placeholder="姓名查询"></el-input>
      </div>
      <div class="text_area">
        <span>单位：</span>
        <el-input v-model="inputcompany" placeholder="单位查询"></el-input>
      </div>
      <div>
        <span>订单日期</span>
        <el-date-picker v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
      </div>
    </div>
    <div id="part_two">
      <div>
        <span>类型</span>
        <el-radio v-model="radio" label="1">全部</el-radio><br />
        &#12288;&#12288;&#8197;<el-radio v-model="radio" label="2">合伙人</el-radio><br />
        &#12288;&#12288;&#8197;<el-radio v-model="radio" label="3">大客户</el-radio>
      </div>
      <div class="div">
        <span>卡类型</span>
        <el-radio v-model="radio1" label="4">全部</el-radio><br />
        &#12288;&#12288;&#12288;&#8197;<el-radio v-model="radio1" label="5">虚拟卡</el-radio><br />
        &#12288;&#12288;&#12288;&#8197;<el-radio v-model="radio1" label="6">实体卡</el-radio>
      </div>
      <div class="div">
        <el-button type="primary">导出到excel</el-button>
      </div>
    </div>
    <div>
      <el-table :data="tableData"
                border
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                style="width: 100%">
        <el-table-column prop="serialnumber" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="number" label="订单数量"> </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="180">
        </el-table-column>
        <el-table-column prop="creationtime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="productname" label="产品名称" width="180">
        </el-table-column>
        <el-table-column prop="price" label="单价" width="180">
        </el-table-column>
        <el-table-column prop="paymonney" label="支付金额" width="180">
        </el-table-column>
        <el-table-column prop="paymode" label="支付方式" width="180">
        </el-table-column>
        <el-table-column prop="paydate" label="支付日期" width="180">
        </el-table-column>
      </el-table>
    </div>
    <div id="part_four">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage4"
                     :page-sizes="[4,8]"
                     :page-size="4"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="400"
                     style="text-align:center">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        tableData: [
          {
            serialnumber: "2016-05-02",
            number: "200",
            name: "王小虎",
            unit: "上海市",
            creationtime: "2021-03-032130",
            productname: "年卡",
            price: "651",
            paymonney: "111111",
            paymode: "微信",
            paydate: "2021-1616416",
          },
          {
            serialnumber: "2016-05-02",
            number: "200",
            name: "王小虎",
            unit: "上海市",
            creationtime: "2021-03-032130",
            productname: "年卡",
            price: "651",
            paymonney: "111111",
            paymode: "微信",
            paydate: "2021-1616416",
          },
          {
            serialnumber: "2016-05-02",
            number: "200",
            name: "王小虎",
            unit: "上海市",
            creationtime: "2021-03-032130",
            productname: "年卡",
            price: "651",
            paymonney: "111111",
            paymode: "微信",
            paydate: "2021-1616416",
          },
          {
            serialnumber: "2016-05-02",
            number: "200",
            name: "王小虎",
            unit: "上海市",
            creationtime: "2021-03-032130",
            productname: "年卡",
            price: "651",
            paymonney: "111111",
            paymode: "微信",
            paydate: "2021-1616416",
          },
        ],
        radio: "1",
        radio1: "1",
        inputname: "",
        inputconpany: "",
        pickerOptions: {
          shortcuts: [
            {
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        value1: "",
        value2: "",
      };
    },
  };
</script>
<style scoped>
  .text_area{
      display:inherit;
     align-items:inherit;
  }
  .text_area>span{
      width:60px;
  }
  .orderlist {
    margin: 0px 60px;
  }

  #part_one {
    display: flex;
    align-items:center;
    justify-content:space-around;
  }

  #part_two {
    display: flex;
    align-items: center;
    width:1000px;
    justify-content:space-around;
  }
  #part_two>div{
      margin:20px;
  }

  #part_four {
    display: flex;
    justify-content: flex-end;
  }
</style>
